<template>
  <div class="bg-white" style="padding: 24px">
    <List
      :grid="{ gutter: 16, xs: 1, sm: 1, md: 2, lg: 2, xl: 3, xxl: 4, xxxl: 2 }"
      :data-source="data"
    >
      <template #renderItem="{ item }">
        <ListItem>
          <Card>
            <template #cover>
              <div>
                <Image :src="item.src" :preview="false" :height="220" />
              </div>
            </template>
            <div style="display: flex; align-items: center">
              <CardMeta style="max-width: 70%">
                <template #title>
                  <TypographyText :content="item.title" :ellipsis="{ tooltip: item.title }" />
                </template>
                <template #description>
                  <div style="color: #999999" class="card-desc">
                    <TypographyText
                      :content="item.description"
                      :ellipsis="{ tooltip: item.description }"
                  /></div>
                </template>
              </CardMeta>
              <Button type="primary" ghost style="margin-left: auto" @click="handlePreview(item)">
                <EyeOutlined />
                预览
              </Button>
            </div>
          </Card>
        </ListItem>
      </template>
    </List>
  </div>
</template>

<script setup lang="ts" name="list">
  import { Card, Image, Button, List, ListItem, TypographyText, CardMeta } from 'ant-design-vue';
  import { EyeOutlined } from '@ant-design/icons-vue';
  import { PropType } from 'vue';
  import { DataSourceItem } from './visual-list.data';

  defineProps({
    data: {
      type: Array as PropType<DataSourceItem[]>,
      defalt: () => [],
    },
  });

  const $emit = defineEmits(['preview']);

  const handlePreview = (data: DataSourceItem): void => {
    $emit('preview', data);
  };
</script>
<style></style>
<style lang="less" scoped>
  :deep(.ant-image-img) {
    height: 100%;
  }

  .card-desc:deep(.ant-typography) {
    color: #999 !important;
  }
</style>
